<#ftl output_format="HTML" >
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>armory-ofs</title>
        <link rel="shortcut icon" href="<@spring.url '/images/favicon.png' />" type="image/x-png">
        <link rel="icon" href="<@spring.url '/images/favicon.png' />" type="image/x-png">
        <#include "/css.ftl" />
        <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    </head>
    <div class="container">
    <div class="col-md-1"></div>
    <div class="col-md-10 col-12">
        <h1>armory-ofs</h1>
        <form id="queryForm" class="form-inline">
            <div>
                <label for="objectId">
                    关联对象的ID：
                    <input id="objectId" class="form-control" name="objectId" placeholder="关联对象的ID" type="number" min="0" max="999999999999999" value="${objectId}" autofocus />
                </label>
                <label for="fileType">
                    文件类型：
                    <input id="fileType" class="form-control" name="fileType" placeholder="文件类型" type="number" min="0" max="999999999999999" value="${fileType}" />
                </label>
                <button type="search" class="btn btn-primary">查询</button>
            </div>
        </form>
        <table class="table table-sm table-hover" >
            <thead>
                <tr>
                    <th>
                        ID
                    </th>
                    <th>
                        文件名
                    </th>
                    <th>
                        长度
                    </th>
                    <th>
                        最后修改时间
                    </th>
                    <th>
                        说明
                    </th>
                    <th>
                        删除
                    </th>
                </tr>
            </thead>
            <tbody id="fileRefs">
<#if fileRefList??>
<#list fileRefList as fileRef>
                <tr id="r${fileRef.id}">
                    <td>
                        ${fileRef.id}
                    </td>
                    <td>
                        <a title="${fileRef.name?js_string}" href="<@spring.url '/${fileRef.id}/${fileRef.hash}' />?action=download" >
<#if fileRef.name?length gt 18>
                        ${fileRef.name[0..18]}...
<#else>
                        ${fileRef.name}
</#if>
                        </a>
                    </td>
                    <td>
                        ${fileRef.size}
                    </td>
                    <td>
                        ${fileRef.lastModifiedTime?datetime}
                    </td>
                    <td>
<#if fileRef.description?length gt 30>
                        ${fileRef.description[0..30]}...
<#else>
                        ${fileRef.description}
</#if>
                    </td>
                    <td>
                        <button data-type="unlink" data-id="${fileRef.id?js_string}" data-hash="${fileRef.hash?js_string}" data-file-name="${fileRef.name?js_string}" >删除</button>
                    </td>
                </tr>
</#list>
</#if>
            </tbody>
        </table>
    </div>
    <div class="col-md-1"></div>
    </div>
<script>
'use strict';
const baseUrl = '<@spring.url "/root" />';
const objectId = '${objectId}';
const fileType = '${fileType}';
const reloadPage = function() {
    window.location.href = baseUrl + '?object-id=' + objectId + '&file-type=' + fileType + '&_t=' + new Date().getTime();
};
document.addEventListener('DOMContentLoaded', () => {
    let queryForm = document.querySelector('#queryForm');
    queryForm.addEventListener('submit', evt => {
        let objectId_ = queryForm.querySelector('#objectId').value;
        let fileType_ = queryForm.querySelector('#fileType').value;
        if (!objectId_ || !fileType_) {
            console.error('illegal blank input');
        } else if (objectId_ <= 0 || fileType_ <= 0) {
            console.error('out of range');
        } else {
            window.location.href = baseUrl + '?object-id=' + objectId_ + '&file-type=' + fileType_ + '&_t=' + new Date().getTime();
        }

        evt.preventDefault();
        return false;
    });
    document.querySelectorAll('#fileRefs button[data-type=unlink]')
        .forEach(btn => {
            let id = btn.getAttribute('data-id');
            let hash = btn.getAttribute('data-hash');
            let fileName = btn.getAttribute('data-file-name');
            btn.addEventListener('click', event => {
                if (confirm('确认删除文件【' + fileName + '】？此操作无法撤销！')) {
                    btn.disabled = true;

                    let url = baseUrl + '/' + id + '/' + hash;
                    axios.request({
                        url: url,
                        method: 'DELETE'
                    })
                    .then(rsp => {
                        if (rsp.data) {
                            reloadPage();
                        } else {
                            alert('无法删除文件【' + fileName + '】');
                        }
                    })
                    .finally(() => btn.disabled = false);
                }
            });
        });
});
</script>
    </body>
</html>
